<template>
    <div class="common-layout">
        <el-container>
            <el-main>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">

                    <el-tab-pane label="营业收入" name="total_operating_revenue">
                        <TotalOperatingRevenue v-if="activeName === 'total_operating_revenue'"></TotalOperatingRevenue>
                    </el-tab-pane>

                    <el-tab-pane label="扣非净利润" name="adjusted_profit">
                        <AdjustedProfit v-if="activeName === 'adjusted_profit'"></AdjustedProfit>
                    </el-tab-pane>

                    <el-tab-pane label="毛利率" name="gross_profit_margin">
                        <GrossProfitMargin v-if="activeName === 'gross_profit_margin'"></GrossProfitMargin>
                    </el-tab-pane>

                    <el-tab-pane label="净利率" name="net_profit_margin">
                        <NetProfitMargin v-if="activeName === 'net_profit_margin'"></NetProfitMargin>
                    </el-tab-pane>

                    <el-tab-pane label="ROE" name="roe">
                        <Roe v-if="activeName === 'roe'"></Roe>
                    </el-tab-pane>

                    <el-tab-pane label="负债率" name="liability_on_asset_ratio">
                        <LiabilityOnAssetRatio v-if="activeName === 'liability_on_asset_ratio'"></LiabilityOnAssetRatio>
                    </el-tab-pane>

                    <el-tab-pane label="营收增涨率" name="inc_total_revenue">
                        <IncTotalRevenueYearOnYear v-if="activeName === 'inc_total_revenue'"></IncTotalRevenueYearOnYear>
                    </el-tab-pane>

                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>


<script setup>
import { ref } from 'vue'

import Roe from '../components/finance/Roe.vue';
import TotalOperatingRevenue from '../components/finance/TotalOperatingRevenue.vue';
import AdjustedProfit from '../components/finance/AdjustedProfit.vue';
import GrossProfitMargin from '../components/finance/GrossProfitMargin.vue';
import NetProfitMargin from '../components/finance/NetProfitMargin.vue';
import LiabilityOnAssetRatio from '../components/finance/LiabilityOnAssetRatio.vue';
import IncTotalRevenueYearOnYear from '../components/finance/IncTotalRevenueYearOnYear.vue';


document.title = "财务数据";
const activeNameKey = "FinanceActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'total_operating_revenue')

const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>